<!--
 * @Author: cjy
 * @Date: 2023-06-07 10:10:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-06-07 18:01:56
 * @Descripttion: 
 * @FilePath: \vue-openlayers-demos\src\views\bufferShadow\BufferShadow.vue
-->
<template>
    <div class="vm">
      <h2 class="h-title"> </h2>
      <div id="map" class="map-x"></div>
    </div>
  </template>
  
  <script>
  import 'ol/ol.css'
  import { Map, View } from 'ol'
  import Tile from 'ol/layer/Tile'
  import XYZ from 'ol/source/XYZ'
  import * as control from 'ol/control'

  import SourceVector from 'ol/source/Vector'
  import Vector from 'ol/layer/Vector'
  import GeoJSON from 'ol/format/GeoJSON'

  import Select from 'ol/interaction/Select';
  import {Style,Stroke,Fill,Circle} from 'ol/style';

  import * as turf from '@turf/turf'
  import {buffer} from '@turf/turf';
//   import {feature} from '@turf/turf';

  
  export default {
    name: 'FirstMap',
    data () {
      return {
        map: null
      }
    },
    methods: {
      initMap () {
        this.map = new Map({
          controls: control.defaults({ zoom: false}),
          target: "map", 
          layers: [ 
            new Tile({
              source: new XYZ({ //http://t0.tianditu.gov.cn/img_c/wmts
              //   url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
                url: 'http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
                projection: "EPSG:4326",
              }),
            }),
            new Tile({
              source: new XYZ({
                url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
                projection: "EPSG:4326",
              })
            })
        
          ],
          view: new View({ 
            projection: "EPSG:4326",
            center: [110.064839, 32.548857], 
            // minZoom:10, 
            zoom: 5 
          })
        })
        // this.addPointLayer()
        this.addPolygonLayer()
      },
  
      addPointLayer(){
        let shadowStyle = new Style({
            image: new Circle({
                radius: 10, // 阴影半径
                fill: new Fill({
                    color: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
                })
            })
        });

        let vectorLayer = new Vector({
            source: new SourceVector({
                url: "/data/china_point.geojson",
                format: new GeoJSON(),
            }),
            style: function(feature, resolution) {
                console.log(resolution,'resolution');
                var styles = [
                    new Style({
                        image: new Circle({
                        radius: 5, // 矢量半径
                        fill: new Fill({
                            color: 'red' // 矢量颜色
                        })
                        })
                    })
                ];
                if (resolution < 10) { // 只有当分辨率小于 10 时才显示阴影
                 styles.push(shadowStyle);
                }
                return styles;
            }
        });

        this.map.addLayer(vectorLayer)
      },

      addPolygonLayer(){
        const shadowStyle = (feature) => {
            const radius = 10; // 缓冲半径
            const blur = 10; // 阴影模糊度
            const distance = 5; // 阴影距离
            const color = 'rgba(255, 0, 0, 0.6)'; // 阴影颜色
            const fill = new Fill({
                color: color
            });
            const stroke = new Stroke({
                color: color,
                width: 1
            });
            const styles = [];
            for (let i = 1; i <= 5; i++) { // 多级缓冲阴影
                const geojsonFormat = new GeoJSON();
                const geojson = geojsonFormat.writeFeatureObject(feature);
                console.log(geojson, 'geojson===============');
                const turfFeature = turf.feature(geojson.geometry, geojson.properties);
                // const bufferCoords = buffer(turfFeature, radius * i, {units: 'meters'}).geometry.coordinates;
                const bufferCoordsFeature = buffer(turfFeature, radius * i, {units: 'meters'});
                const shadow = new Style({
                    fill: fill,
                    stroke: stroke,
                    geometry: function(feature) {
                        // 将Turf.js的Feature对象转换为GeoJSON字符串
                        let geojson = turf.featureCollection([bufferCoordsFeature]);
                        let geojsonStr = JSON.stringify(geojson);

                        // 将GeoJSON字符串转换为OpenLayers的Feature对象
                        let olFeature = new GeoJSON().readFeatures(geojsonStr);
                        // console.log(olFeature, 'olFeature');

                        // 从OpenLayers的Feature对象中获取Geometry对象
                        let olGeometry = olFeature[0].getGeometry();
                        // const geom = new GeoJSON().readGeometry({type: 'MultiPolygon', coordinates: bufferCoords});
                        // olGeometry.translate(distance * (i - 1), -distance * (i - 1));
                        
                        return olGeometry;
                    }
                });
                styles.push(shadow);
            }
            return styles;
        };

        const vectorSource = new SourceVector({
            format: new GeoJSON(),
            url: '/data/taishun_bs_mian.json'
        });

        const vectorLayer = new Vector({
            source: vectorSource,
            style: shadowStyle,
            zIndex: 9
        });
        this.map.addLayer(vectorLayer)

        setTimeout(() => {
            console.log(vectorSource.getFeatures(), 'vectorSource.getFeatures()[0].getGeometry()');
            this.map.getView().fit(vectorSource.getFeatures()[0].getGeometry())
        }, 500);
      }
  
    },
    mounted () {
      this.initMap();
      console.log(this.map.getLayers().getArray());
  
  
    }
  }
  </script>
  
  <style lang="scss" scoped>
    
  </style>